<script setup lang="ts">
import {GetInterfaceInfoList} from "@/api/interfaceInfo";
import {message} from "@/utils/message";
import {ref, onMounted, nextTick, Ref} from "vue";
import ListCard from "./components/ListCard.vue";
import {InterfaceInfo, InterfaceInfoQueryRequest} from "@/model/interfaceInfo";
import {Page} from "@/model/comon";

defineOptions({
  name: "Welcome"
});

const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;


const interfaceInfoQuery: Ref<InterfaceInfoQueryRequest> = ref({
  /**
   * 当前页号
   */
  current: 1,
  /**
   * 页面大小
   */
  pageSize: 10
});

const pageInterfaceInfoList: Ref<Page<InterfaceInfo>>= ref({
  /**
   * 记录列表
   */
  records: [],
  /**
   * 总条数
   */
  total: 0,
  /**
   * 页大小
   */
  size: 0,
  /**
   * 当前页
   */
  current: 0,
  /**
   * 总页数
   */
  pages: 0,
});

const dataLoading = ref(true);

const getAllInterfaceInfo = async () => {
  try {
    const res = await GetInterfaceInfoList(interfaceInfoQuery.value);
    if (res.code === 0) {
      pageInterfaceInfoList.value = res.data;
    } else {
      message(res.message, {type: "error"});
    }
  } catch (e) {
    console.log(e);
  } finally {
    setTimeout(() => {
      dataLoading.value = false;
    }, 500);
  }
};

/**
 * 分页
 */
const handleSizeChange = (val: number) => {
  interfaceInfoQuery.value.pageSize = val;
  interfaceInfoQuery.value.current = 1;
  getAllInterfaceInfo();
};
const handleCurrentChange = (val: number) => {
  interfaceInfoQuery.value.current = val;
  getAllInterfaceInfo();
};

onMounted(() => {
  getAllInterfaceInfo();
});

// 搜索接口关键词
const searchKeyword = ref("");
// 处理搜索操作
const handleSearch = () => {
  // 将搜索关键词整合进查询请求对象
  interfaceInfoQuery.value.name = searchKeyword.value.trim();
  // 重置当前页为第一页，因为搜索可能改变结果集
  interfaceInfoQuery.value.current = 1;
  // 执行查询以获取符合搜索条件的用户列表
  getAllInterfaceInfo();
};

// 接口状态选项
const statusOptions = [
  {
    value: 1,
    label: "开启"
  },
  {
    value: 0,
    label: "关闭"
  }
];
</script>

<template>
  <div>
    <div class="w-full mb-4">
      <el-input
        v-model="searchKeyword"
        style="width: 300px"
        placeholder="请输入接口名称"
        clearable
        @keyup.enter.native="handleSearch"
      >
        <template #suffix>
          <el-icon class="el-input__icon">
            <IconifyIconOffline
              v-show="searchKeyword.length === 0"
              icon="ri:search-line"
            />
          </el-icon>
        </template>
      </el-input>
      <el-button style="margin-left: 20px;width: 70px" type="primary" @click="handleSearch">搜索</el-button>
    </div>
    <div
      v-loading="dataLoading"
      :element-loading-svg="svg"
      element-loading-svg-view-box="-10, -10, 50, 50"
    >
      <el-empty
        v-show="pageInterfaceInfoList?.total === 0"
        :description="`${searchKeyword} 接口信息不存在`"
      />
      <template v-if="pageInterfaceInfoList?.total > 0">
        <el-row :gutter="16">
          <el-col
            v-for="(interfaceInfo,index) in pageInterfaceInfoList?.records"
            :key="index"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
            :xl="4"
          >
            <ListCard
              :product="interfaceInfo"
              @manage-product=""
            />
          </el-col>
        </el-row>
        <!--  底部分页选择-->
        <el-pagination
          style="margin-top: 25px;display: flex;justify-content: flex-end;"
          v-model:current-page="pageInterfaceInfoList.current"
          v-model:page-size="pageInterfaceInfoList.size"
          :page-sizes="[5, 10, 15, 20]"
          :small="false"
          :disabled="false"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :page-count="parseInt(pageInterfaceInfoList.pages)"
          :total="parseInt(pageInterfaceInfoList.total)"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </template>
    </div>
  </div>
</template>
